<template>
  <div>
    <div class="logo">
      <img class="logo" src="~images/banner-prod.jpg" alt="">
    </div>
    <form id="loginForm" name="loginForm" action="" method="post">
      <div class="loginPage">
        <div class="input-container">
          <label><img src="~images/temp/icon1.png" alt="">
          </label>
          <div class="flex">
            <input type="tel" maxlength="11" placeholder="请输入手机号码" id="phone" name="phone" v-model="phone">
          </div>
          <div class="delete" id="delete" @click="phoneDel">
            <img src="~images/temp/icon3.png" alt="">
          </div>
        </div>
        <div class="input-container-yzm">
          <label><img src="~images/temp/icon2.png" alt=""></label>
          <div class="flex">
            <input type="text" placeholder="请输入验证码" id="smsCode" name="smsCode">
          </div>
          <div class="weui_cell_ft"  @click="sms">
            <Obtain :off = 'off'></Obtain>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex">
            <label for="weuiAgree" class="weui-agree">
                <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked="checked">
                <span class="weui-agree__text">
                  阅读并同意<a href="REGISTER_CONTENT.html">《注册协议》</a>
                </span>
            </label>
          </div>
        </div>
      </div>
    </form>
    <div style="padding:10px;">
      <button class="weui-btn weui-btn_yellow" id="login" @click="login">登 录</button>
    </div>
    <div class="error-txt"><span>登录失败，请输入正确的验证码！</span></div>
  </div>
</template>

<script>
import Obtain from '@/components/verification_code/obtain'
import $ from 'jquery'
window.jQuery = $
window.$ = $
export default {
  components: {
    Obtain
  },
  data () {
    return {
      phone: '',
      off: false
    }
  },
  watch: {
    phone: function (val) {
      if (val === '' || val === null) {
        $('#delete').hide()
      } else {
        $('#delete').show()
      }
    }
  },
  methods: {
    phoneDel: function () {
      this.phone = ''
    },
    sms: function (event) {
      var phone = $('#phone').val()
      if (phone === '') {
        $.toast('请输入电话号码', 'text')
        $('#phone').focus()
        return
      }
      if (!this.util.phoneNumber(phone)) {
        $.toast('请输入正确的电话号码', 'text')
        $('#phone').focus()
      }
      this.off = true
      return true
    },
    login: function (event) {
      if (this.sms()) {
        var smsCode = $('#smsCode').val()
        var isChecked = $('#weuiAgree').is(':checked')
        var data = $('#loginForm').serialize()
        if (smsCode === '') {
          $.toast('请输入验证码', 'text')
          $('#smsCode').focus()
          return
        }
        if (!isChecked) {
          $.toast('请勾选注册协议', 'text')
          $('#weuiAgree').focus()
          return
        }
        this.$router.push({ path: 'LoanApply' })
        console.log('登入数据：' + data)
      }
    }
  }
}
</script>

<style lang="css" scoped>
@import '../../../assets/styles/qrLoginHz.css'
</style>
